<% 
    var headContent = {
%>
  <!-- //这里包含需要引入的其他css/js文件 -->
  <link rel="stylesheet" href="${base}/template/common/css/tree/amazeui.tree.css"/>
  <link rel="stylesheet" href="${base}/template/common/css/datetimepicker/amazeui.datetimepicker.css"/>
  <link rel="stylesheet" href="${base}/template/common/css/uploadify/uploadify.css"/>
  <style>
   /*树结构 begin*/
   .am-tree .am-tree-item.am-tree-selected .am-tree-item-name .am-tree-label,
   .am-tree.am-tree-folder-select .am-tree-branch.am-tree-selected > .am-tree-branch-header .am-tree-branch-name .am-tree-label {
      background-color: #0c80ba;
      color: #fff;
   }
   /*树结构 end*/
   /*验证：提示信息样式 begin*/
   .am-alert-danger {
      background-color: transparent;
      border-color: transparent;
      color: red;
    }
    .am-alert {
      margin-bottom: 1em;
      padding: .625em;
      background: transparent;
      border: none;
      border-radius: 0;
    }
    /*验证：提示信息样式 end*/
    /*uploadify上传 begin*/
    .uploadify-queue-item .cancel a {
      background: url('${base}/template/common/images/uploadify-cancel.png') 0 0 no-repeat;
      float: right;
      height: 16px;
      text-indent: -9999px;
      width: 16px;
    }
    .uploadify-button {
      background: url('${base}/template/common/images/uploadify_btn_focus.png');
      border-radius: 5px;
      border: none;
    }
    .uploadify:hover .uploadify-button {
      background: url('${base}/template/common/images/uploadify_btn_hover.png');
      border-radius: 5px;
      border: none;
    }
    /*uploadify上传 end*/
  </style>
<%};%>

<%layout("/common/_layout.html",{head:headContent}){%>
  <!--模态窗口html代码位置-->
  <%include("template_modal_page.tpl"){}%>
  <form class="am-form" id="tmpForm" enctype="multipart/form-data" method="post">
      <div class="am-cf am-padding">
        <div class="am-fl am-cf" onclick="javascript: History.back();"><strong class="am-text-primary am-text-lg">组件/控件模板</strong> / <small>form</small></div>
      </div>

      <!--选项卡（tabs）begin-->
      <div class="am-tabs am-margin" data-am-tabs>
        <ul class="am-tabs-nav am-nav am-nav-tabs">
          <li class="am-active"><a href="#tab1">表单</a></li>
          <li><a href="#tab2">富文本</a></li>
          <li><a href="#tab3">树结构</a></li>
          <li><a href="#tab4">模态窗口</a></li>
          <li><a href="#tab5">日历控件</a></li>
          <li><a href="#tab6">附件上传</a></li>
          <li><a href="#tab7">附件上传2</a></li>
        </ul>
        <div class="am-tabs-bd">
          <div class="am-tab-panel am-fade am-in am-active" id="tab1">
              <!--验证表单元素（validate) begin-->
              <!--switch开关 begin-->
              <div class="am-g am-form-group am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                  <span style="color: red;">*</span>是否启用
                </div>
                <div class="am-u-sm-6 am-u-md-6">
                  <input data-am-switch id="enabled" type="checkbox" checked data-size="sm" data-off-text="否" data-on-text="是" value="${themes.enabled!'1'}" style="display:none;"/>
                </div>
                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
              </div>
              <!--switch开关 end-->
              <!--input begin-->
              <div class="am-g am-form-group am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                  <span style="color: red;">*</span>文本框：
                </div>
                <div class="am-u-sm-6 am-u-md-6">
                  <input class="js-ajax-validate" data-validate-async data-validation-message="输入用户名（2-10个字符）" type="text" id="user-name" minlength="2" maxlength="10" placeholder="输入用户名（2-10个字符）" required/>
                  <!-- <label class="lable-alert" for="user-name"></label> -->
                </div>
                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
              </div>
              <div class="am-g am-form-group am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                  <span style="color: red;">*</span>文本框：
                </div>
                <div class="am-u-sm-6 am-u-md-6">
                  <input type="hidden" name="enabled" value="${themes.enabled!'1'}" />
                  <input class="js-ajax-validate js-pattern-mobile" data-validate-async data-validation-message="输入手机号" type="text" id="user-mobile" minlength="1" maxlength="11" placeholder="输入手机号" required/>
                  <!-- <label class="lable-alert" for="user-mobile"></label> -->
                </div>
                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
              </div>
              <!--input end-->

              <!--checkbox begin-->
              <div class="am-g am-form-group am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                  <span style="color: red;">*</span>多选框：
                </div>
                <div class="am-u-sm-6 am-u-md-6">
                  <label class="am-checkbox-inline">
                    <input data-am-ucheck data-validation-message="请至少选择2项" type="checkbox" name="checkmore" value="" required minchecked="2" maxchecked="4"> 橘子
                  </label>
                  <label class="am-checkbox-inline">
                    <input type="checkbox" name="checkmore" value="" data-am-ucheck> 苹果
                  </label>
                  <label class="am-checkbox-inline">
                    <input type="checkbox" name="checkmore" value="" data-am-ucheck> 菠萝
                  </label>
                  <label class="am-checkbox-inline">
                    <input type="checkbox" name="checkmore" value="" data-am-ucheck> 雪梨
                  </label>
                  <label class="am-checkbox-inline">
                    <input type="checkbox" name="checkmore" value="" data-am-ucheck> 油桃
                  </label>
                  <!-- <div><label class="lable-alert" for="checkmore"></label></div> -->
                </div>
                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
              </div>
              <!--checkbox end-->

              <!--radio begin-->
              <div class="am-g am-form-group am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                  <span style="color: red;">*</span>单选框：
                </div>
                <div class="am-u-sm-6 am-u-md-6">
                  <label class="am-radio-inline">
                    <input type="radio" name="radio10" value="male" data-am-ucheck required> 男
                  </label>
                  <label class="am-radio-inline">
                    <input type="radio" name="radio10" value="female" data-am-ucheck> 女
                  </label>
                  <label class="am-radio-inline">
                    <input type="radio" name="radio10" value="pig" data-am-ucheck> 人妖
                  </label>
                  <!-- <div><label class="lable-alert" for="radio10"></label></div> -->
                </div>
                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
              </div>
              <!--radio end-->

              <!--select-single begin-->
              <div class="am-g am-form-group am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                  <span style="color: red;">*</span>下拉单选框：
                </div>
                <div class="am-u-sm-6 am-u-md-6">
                  <!--默认选中的option加selected或者selected="selected"-->
                  <!-- <option value="a" selected>Apple</option> -->
                  <select data-am-selected name="test" placeholder="请选择" required>
                    <option value=""></option>
                    <option value="a">Apple</option>
                    <option value="b">Banana</option>
                    <option value="o">Orange</option>
                  </select>
                  <!-- <div><label class="lable-alert" for="test"></label></div> -->
                </div>
                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
              </div>
              <!--select-single end--> 

              <!--select-multi begin-->
              <div class="am-g am-form-group am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                  <span style="color: red;">*</span>下拉单选框：
                </div>
                <div class="am-u-sm-6 am-u-md-6">
                  <select multiple id="doc-select-2-1" name="multioptions" required>
                    <option>111111</option>
                    <option>222222</option>
                    <option>333333</option>
                    <option>444444</option>
                    <option>555555</option>
                    <option>666666</option>
                  </select>
                  <!-- <label class="lable-alert" for="multioptions"></label> -->
                </div>
                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
              </div>
              <!--select-multi end-->
              <!--验证表单元素（validate end-->
          </div>
          <div class="am-tab-panel am-fade" id="tab2">
            <!--富文本编辑器（ueditor）begin-->
            <div class="am-g am-form-group am-margin-top">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">
                富文本编辑器：
              </div>
              <div class="am-u-sm-6 am-u-md-6">
                <!-- 加载编辑器的容器 -->
                <script id="container" name="content" type="text/plain">
                                                             这里写你的初始化内容
                </script>
              </div>
              <div class="am-u-sm-2 am-u-md-4">&nbsp;</div>
            </div>
            <!--富文本编辑器（ueditor）end-->
          </div>
          <div class="am-tab-panel am-fade" id="tab3">
            <!--树结构（tree）begin-->
            <div class="am-g am-form-group am-margin-top">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">
                &nbsp;
              </div>
              <div class="am-u-sm-6 am-u-md-6">
                  <!--有选择文件夹需求的引入该模板页面-->
                  <%include("template_tree_folder_selected_page.tpl"){}%>
                  <!--无选择文件夹需求的引入该模板页面-->
                  <%//include("template_tree_page.tpl"){}%>
              </div>
              <div class="am-u-sm-2 am-u-md-4">&nbsp;</div>
            </div>
            <!--树结构（tree）end-->
          </div>
          <div class="am-tab-panel am-fade" id="tab4">
              <!--模态窗口（modal）begin-->
              <div class="am-g am-form-group am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                  模态窗口：
                </div>
                <div class="am-u-sm-6 am-u-md-6">
                  <button id="modal-sel" type="button" class="am-btn am-btn-primary">弹窗选择</button>
                  <span id="modal-return-data"></span>
                  <div id="modal-show-content" style="display:none;">
                    <!--模态窗口展示的内容，根据需求展示相应内容 begin-->
                    <div class="am-g am-margin-top">
                      <div class="am-u-sm-4 am-u-md-4">
                        <select multiple class="modal-select">
                          <option>111111</option>
                        </select>
                      </div>
                    </div>
                    <!--模态窗口展示的内容 end-->
                  </div>
                </div>
                <div class="am-u-sm-2 am-u-md-6">&nbsp;</div>
              </div>
              <!--模态窗口（modal）end-->
          </div>
          <div class="am-tab-panel am-fade" id="tab5">
              <!--日期控件（datetimepicker）begin-->
              <div class="am-g am-form-group am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                  日历控件：
                </div>
                <div class="am-u-sm-6 am-u-md-6">
                  <div class="am-input-group date form_datetime" data-date="2015-02-14 14:45">
                      <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span>
                      <input name="addDate" size="16" type="text" value="" class="am-form-field" required />
                      <span class="am-input-group-label add-on"><i class="icon-remove am-icon-close"></i></span>
                  </div>
                  <label class="lable-alert" for="addDate"></label>
                </div>
                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
              </div>
              <!--日期控件（datetimepicker）end-->
          </div>

          <div class="am-tab-panel am-fade" id="tab6">
              <!--附件上传控件（uploadify）begin-->
              <div class="am-g am-form-group am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                  上传文件：
                </div>
                <div class="am-u-sm-6 am-u-md-6">
                  <input type="file" name="file_upload" id="file_upload"/>
                  <div id="fileQueue"></div>
                </div>
                <div class="am-u-sm-2 am-u-md-4">&nbsp;</div>
              </div>
              <!--附件上传控件（uploadify）end-->
          </div>
          <div class="am-tab-panel am-fade" id="tab7">
              <!--附件上传控件（html5）begin-->
              <div class="am-g am-form-group am-margin-top">
                 <div class="am-btn-group am-btn-group-xs">
                   <div class="am-btn-group am-form-file"><button type="button" id="bt_import" class="am-btn am-btn-danger"><i class="am-icon-cloud-upload"></i> 选择要上传的文件</button> <input id="doc-form-file" type="file" name="import" multiple></div>
                  </div>

                <div id="progress" class="am-progress" style="display:none">
                   <div class="am-progress-bar" style="width: 80%"></div>
                </div>
              </div>
              <!--附件上传控件（html5）end-->
          </div>
        </div>
      </div>
      <!--选项卡（tabs）end-->
      <div class="am-margin">
        <button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
        <button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="javascript: History.back();">返回上一级</button>
      </div>
  </form>
  <script type="text/javascript" src="${base}/template/common/js/datetimepicker/amazeui.datetimepicker.js"></script>
  <script type="text/javascript" src="${base}/template/common/js/datetimepicker/locales/amazeui.datetimepicker.zh-CN.js" charset="UTF-8"></script>
  <script type="text/javascript" src="${base}/template/common/js/jquery.metadata.js"></script>
  <script type="text/javascript" src="${base}/ueditor/ueditor.config.js?jid=3"></script>
  <script type="text/javascript" src="${base}/ueditor/ueditor.all.min.js?jid=3"></script>
  <script type="text/javascript" src="${base}/ueditor/ueditor.parse.min.js?jid=3"></script>
  <script type="text/javascript" charset="utf-8" src="${base}/ueditor/lang/zh-cn/zh-cn.js"></script>
  <script type="text/javascript" src="${base}/template/common/js/uploadify/jquery.uploadify.js"></script>
  <script type="text/javascript">
    $(function() {
      /*switch开关 begin*/
      $("#enabled").on({
          "switchChange.bootstrapSwitch": function(event, state) {
            $enabled = $("input[name='enabled']");
            if(state) {
              $enabled.val(1);
            }else{
              $enabled.val(0);
            }
            //console.log($enabled.val());
          }
      });
      /*switch开关 end*/
      /*模态对话窗 begin*/
      /*$(".mysel").click(function(){
        window.parent.openModal("选择类目",$('#my-modal-show-content').html(),function(returndata){
          $('#my-modal-returndata').html(returndata);
        });//调用父页面的方法
      });*/
      $("#modal-sel").click(function(){
        var $modal = $("#modal");
        $modal.modal({
          closeViaDimmer: false //点击遮罩层时关闭 Modal，默认为 true
        });
        $modal.on('opened.modal.amui', function(){//打开窗口时的处理事件
          $("#modal-title").html("选择");//给弹窗元素赋标题值
          //模拟ajax请求后台数据后显示内容
          setTimeout(function(){
            $("#modal-content").html($('#modal-show-content').html());//给弹窗元素赋内容值
            //$("#modal .modal-select").attr("disabled","disabled");
          },500);
          //显示本地内容
          //$("#modal-content").html($('#modal-show-content').html());//给弹窗元素赋内容值
        });
        $modal.on('closed.modal.amui', function() {//关闭窗口时的处理事件
          $('#modal-confirm').unbind('click');//解绑
          $('#modal-cancel').unbind('click');//解绑
          //清除数据，Confirm 关闭后移除暂存的实例，再次调用时重新初始化
          $modal.removeData('amui.modal');
        });
        $('#modal-confirm').on('click', function() {//确认按钮处理事件
          $("#modal-return-data").html($(".modal-select option:selected").text());//确认后显示数据
        });
        $('#modal-cancel').on('click', function() {//取消按钮处理事件
          $modal.modal('close');
        });
      });
      /*模态对话窗 end*/

      /*日历控件 begin*/
      var mydatetime = $('.form_datetime').datetimepicker({
        language:  'zh-CN',//语言设置，默认使用英语 'en' ,额外添加amazeui.datetimepicker.zh-CN.js,注意编码格式charset="UTF-8"
        format: 'yyyy-mm-dd hh:ii',//日期格式：接受String,默认为mm/dd/yyyy
        autoclose: true,//日期选定以后是否自动关闭日期选择器, 默认为 true (仅在 days(今日) 视图有效)。
        todayBtn: true,//是否显示今日视图
        todayHighlight: true,//是否高亮显示今天的日期
        startDate: '2015-02-14 14:45',//设置日历初始时间
        minuteStep: 5,//设置分钟视图时间间隔数，默认为 5
        pickerPosition: 'bottom-right'//'bottom-right' (默认)、'bottom-left'、'top-right'、'top-left'
      });
      mydatetime.on('show', function(ev){//绑定事件
        //alert('datetimepciker 显示了');
      });
      /*日历控件 end*/

      /*表单验证：begin*/
        var $ajaxObj = null;
        var myMsg = "";
        //自定义规则，用法：验证元素上加class="js-pattern-mobile"
        if ($.AMUI && $.AMUI.validator) {
          $.AMUI.validator.patterns.mobile = /^1((3|5|8){1}\d{1}|70)\d{8}$/;
        }
        $("#tmpForm").validator({
          // 域通过验证时回调
          onValid: function(validity) {
           $(validity.field).closest('.am-form-group').find('.am-alert').hide();
          },
          // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
          onInValid: function(validity) {
            var $field = $(validity.field);
            var $group = $field.closest('.am-form-group');
            var $alert = $group.find('.am-alert');
            // 使用自定义的提示信息 或 插件内置的提示信息
            var msg = "";
            if($ajaxObj && myMsg && $field.val() && $field.is($ajaxObj)){
              msg = myMsg;
              $ajaxObj = null;
              myMsg = "";
            }else{
              msg = $field.data('validationMessage') || this.getValidationMessage(validity);
            }

            if (!$alert.length) {
              $alert = $('<div class="am-alert am-alert-danger"></div>').hide().
              //appendTo($group);
              appendTo($group.find(".input-msg"));
            }
            console.log("onInValid : "+$field.val());
            $alert.html(msg).show();
          },
          // 域验证通过时添加的操作，通过该接口可定义各种验证提示
          markValid: function(validity) {
            // this is Validator instance
            var $field  = $(validity.field);
            //add by zxl，只对有required属性的字段进行验证
            if(typeof($field.attr("required"))!="undefined"){
              var options = this.options;
              var $parent = $field.closest('.am-form-group');
              $field.addClass(options.validClass).
                removeClass(options.inValidClass);

              $parent.addClass('am-form-success').removeClass('am-form-error');

              options.onValid.call(this, validity);
            }
          },
          // 域验证失败时添加的操作，通过该接口可定义各种验证提示
          markInValid: function(validity) {
            var options = this.options;
            var $field  = $(validity.field);
            var $parent = $field.closest('.am-form-group');
            $field.addClass(options.inValidClass + ' ' + options.activeClass).
              removeClass(options.validClass);

            $parent.addClass('am-form-error').removeClass('am-form-success');

            options.onInValid.call(this, validity);
          },
          //自定义验证
          validate: function(validity) {
            // 在这里编写你的验证逻辑
            var v = $(validity.field).val();
            var comparer = function(v1, v2) {
              if (v1 == v2) {
                validity.valid = false;
              }
              // 这些属性目前 v2.3 以前没什么用，如果不想写可以忽略
              // 从 v2.3 开始，这些属性被 getValidationMessage() 用于生成错误提示信息
              /*if (v2 < 10) {
                validity.rangeUnderflow = true;
              } else if(v2 > 10) {
                validity.rangeOverflow = true;
              }*/
            };
            // Ajax 验证
            if(validity.valid){
              if ($(validity.field).is('#user-name')) {
                // 异步操作必须返回 Deferred 对象
                return $.ajax({//远程唯一性验证
                  url: 'http://s.amazeui.org/media/i/demos/validate.json',
                  // cache: false, 实际使用中请禁用缓存
                  dataType: 'json'
                }).then(function(data) {
                  // Ajax 请求成功，根据服务器返回的信息，设置 validity.valid = true or flase
                  comparer(data.count, v);
                  if(!validity.valid){
                    console.log("validate");
                    $ajaxObj = $(validity.field);
                    myMsg = "用户名已经存在";
                    // $(validity.field).closest('.am-form-group').find('.lable-alert').html("用户名已经存在").show();
                  }
                  // 返回 validity
                  return validity;
                }, function() {
                  // Ajax 请求失败，根据需要决定验证是否通过，然后返回 validity
                  //this.onInValid(validity);
                  return validity;
                });
              }else if ($(validity.field).is('#user-mobile')) {
                // 异步操作必须返回 Deferred 对象
                return $.ajax({//远程唯一性验证
                  url: 'http://s.amazeui.org/media/i/demos/validate.json',
                  // cache: false, 实际使用中请禁用缓存
                  dataType: 'json'
                }).then(function(data) {
                  // Ajax 请求成功，根据服务器返回的信息，设置 validity.valid = true or flase
                  comparer(data.count, v);
                  if(!validity.valid){
                    console.log("validate");
                    $ajaxObj = $(validity.field);
                    myMsg = "手机号已经存在";
                    // $(validity.field).closest('.am-form-group').find('.lable-alert').html("用户名已经存在").show();
                  }
                  // 返回 validity
                  return validity;
                }, function() {
                  // Ajax 请求失败，根据需要决定验证是否通过，然后返回 validity
                  //this.onInValid(validity);
                  return validity;
                });
              }
            }
            // 本地验证，同步操作，无需返回值
            if ($(validity.field).is('.js-sync-validate')) {
              comparer(10, v);
              // return validity;
            }
          }
        });
      /*表单验证：end*/

      /*富文本编辑器：ueditor begin*/
      var ue = UE.getEditor('container');
      /*富文本编辑器：ueditor end*/
     
      /*上传图片 begin*/
      setTimeout(function(){//解决连续点击同一个url后chrome崩溃的问题
        $('#file_upload').uploadify({
            'swf'      : '${base}/template/common/images/uploadify.swf',//必须，上传核心文件
            'uploader' : '${base}/upload/image/?jsessionid=${sid!''}',//必须，请求服务器接口地址，对应后台UploadController类，需要上传其他类型的文件，请求地址需要修改，jsessionid：解决firefox中无法上传的问题，需要后台返回sessionid
            // Your options here
            'cancelImage': '${base}/template/common/images/uploadify-cancel.png',//可自定义
            'queueID': 'fileQueue',//进度条容器
            'auto': true,
            'multi': false,//是否可以批量上传开关
            'buttonText': '文件上传',//上传按钮文本
            'folder': '${base}/upload',//上传后文件的存放位置
            'fileSizeLimit' : 10240000000,  //文件上传的大小1个G
            'fileTypeExts' : '*.jpg;*.png;*.jpeg;*.gif',//根据需求设置类型限制
            //'buttonClass': 'am-btn am-btn-primary',//为上传按钮添加类名
            //'formData': { 'ASPSESSID': ASPSESSID, 'AUTHID': auth },//提交数据
            'onSelect': function (file) {//选中时事件
                // $('#uploadify').uploadifySettings('formData', { 'ASPSESSID': ASPSESSID, 'AUTHID': auth });
                // alert(formDate);
            },
            'onComplete': function (file, data, response) {//上传完成时事件
              alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
            },

            'onQueueComplete' : function(queueData) {
              //alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
            },
            // 'onQueueComplete': function () {//批量上传时事件
            //     alert("上传完成！");
            //     $('#fileQueue').attr('style', 'visibility :hidden');
            // },
            'onSelectError': function (file, errorCode, errorMsg) {
                //$('#fileQueue').attr('style', 'visibility :hidden');
            },
            'onUploadStart': function (file) {
            },
            'onUploadError' : function(file, errorCode, errorMsg, errorString) {
              alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
            }, 
            'onUploadSuccess' : function(file, data, response) {
              // alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
              
              var imageNode = document.createElement("img");
              imageNode.src = JSON.parse(data).url;
              imageNode.width = 100;
              imageNode.height = 100;
              var inputNode = document.createElement("input");
              inputNode.type = "hidden";
              inputNode.value = file.name;
            
              $('#file_upload').after(inputNode,imageNode);
            }
        });
      },10);
      
      $('#doc-form-file').on('change', function() {
        $("#progress").show();
        var id=setInterval(function() {
            $.ajax({
                url: "${base}/upload/progress",    //请求的url地址
                dataType: "json",   //返回格式为json
                async: true, //请求是否异步，默认为异步，这也是ajax重要特性
                type: "GET",   //请求方式
                success: function(data) {
                    $(".am-progress-bar").width(data + "%");
                }
            });
        
        },10);
        $.ajaxFileUpload({
         url : "${base}/upload/image",
         secureuri : false,
         fileElementId : "doc-form-file",// file标签的id
         dataType : 'json',// 返回数据的类型
         success : function(data, status) {
            if (typeof (data.error) != 'undefined') {
                alert(data.error);
            } else {
                console.log("3333");
            }
            clearInterval(id); 
        },
        error : function(data, status, e) {
            alert(e);
            clearInterval(id); 
        }
      });
    });
      /*上传图片 end*/

      /*树结构 begin*/
      //此为模拟数据，实际需要从服务器端取得
        var data = [
        {
          title: '苹果公司',
          type: 'folder',
          attr: {
                    id:'1'
                },
          ppp: [
            {
              title: 'iPhone',
              type: 'item'
              
            },
            {
              title: 'iMac',
              type: 'item'
            },
            {
              title: 'MacBook Pro',
              type: 'item'
            },
            {
              title: '苹果公司2',
              type: 'folder',

              ppp: [
                {
                  title: 'iPhone2',
                  type: 'item'
                },
                {
                  title: 'iMac2',
                  type: 'item'
                },
                {
                  title: 'MacBook Pro2',
                  type: 'item'
                }
              ]
            },
          ]
        },
        {
          title: '微软公司',
          type: 'item'
        },
        {
          title: 'GitHub',
          type: 'item'
        }
      ];

      $('#myTreeSelectableFolder').tree({
        dataSource: function(options, callback) {
          // 模拟异步加载
          setTimeout(function() {
            callback({data: options.ppp || data});
          }, 400);
        },
        multiSelect: false,//多选
        cacheItems: true,//缓存树结构，为false的话，每次重新生成树结构
        folderSelect: true//文件夹（父节点）可选，选中后即选中该文件夹下所有子节点
      });

      $('#myTreeSelectableFolder').on('loaded.tree.amui', function (event, data) {//加载事件
        // do something with data: { selected: [array], target: [object] }
      });

      $('#myTreeSelectableFolder').on('selected.tree.amui', function (event, data) {//选中事件
        // do something with data: { selected: [array], target: [object] }
      });

      $('#myTreeSelectableFolder').on('closed.tree.amui', function (event, data) {//关闭父树节点事件
        // do something with data: { selected: [array], target: [object] }
      });
      /*树结构 end*/
    });
  </script>
<%}%>